<template>
	<div id="newProject">
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title" @click="cancelTest()">体测预约</span>
			<span class="title" @click="cancelProgect()">/ 场次列表</span> / {{actionText}}
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">场次信息</span>
				<el-button class="save" type="primary" @click="save()">保存</el-button>
				<el-button class="cancel" type="primary" @click="cancelProgect()">返回</el-button>
			</div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="ruleForm">
				<el-form-item label="年级：" prop="grade" required>
					<el-select v-model="ruleForm.grade">
						<el-option v-for='item in grades' :label='item.name' :value='item.value' :key="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="性别区分：" prop="gender" required>
					<el-radio-group v-model="ruleForm.gender" @change="changeGender">
						<el-radio v-model="ruleForm.gender" label="1">男生</el-radio>
						<el-radio v-model="ruleForm.gender" label="0">女生</el-radio>
						<el-radio v-model="ruleForm.gender" label="2">不限</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="教师：" prop="teacherName" required>
					<el-select v-model="ruleForm.teacherName" filterable placeholder="请选择" @change="changeTeacher">
						<el-option v-for="item in teachers" :key="item.mid" :label="item.teacherName" :value="String(item.mid)">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="教师手机号：" prop="phone">
					<el-input v-model="ruleForm.phone" class="el-input1" placeholder="教师手机号" disabled></el-input>
				</el-form-item>
				<el-form-item label="最大预约人数：" prop="totalCount" required>
					<el-input v-model="ruleForm.totalCount" type="number" class="el-input1" placeholder="请输入最大预约人数"></el-input>
				</el-form-item>
				<el-form-item label="测试内容：" prop="testNameType" required>
					<el-select v-model="ruleForm.testNameType">
						<el-option v-for='item in testItem' :label='item.name' :value='item.id' :key="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="测试日期：" required>
					<el-form-item prop="date" class="date">
						<el-date-picker placeholder="请选择测试日期" format="yyyy/MM/dd" v-model="ruleForm.date" class="time"></el-date-picker>
					</el-form-item>
					<el-form-item class="date" prop="time" style="margin-left:5px;">
						<el-time-picker is-range placeholder="请选择测试时间范围" v-model="ruleForm.time" class="time"></el-time-picker>
					</el-form-item>
				</el-form-item>
				<el-form-item label="备注：" prop="mark">
					<el-input type="textarea" :autosize="{minRows: 3}" v-model="ruleForm.mark" class="el-input1" placeholder="请输入备注信息"></el-input>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			let checkDate = (rule, value, callback) => {
				if (value) {
					callback();
				} else {
					callback(new Error("请选择测试日期"));
				}
			};
			let checkTime = (rule, value, callback) => {
				if (value) {
					callback();
				} else {
					callback(new Error("请选择测试时间范围"));
				}
			};
			let checkTotalCount = (rule, value, callback) => {
				if (value) {
					if (value > 0) {
						callback();
					} else {
						callback('最大预约人数必须大于0')
					}
				} else {
					callback(new Error("请填写最大预约人数"));
				}
			};

			return {
				physicalName: this.$util.getUrlParam('physicalName') || '',
				physicalTestId: "",
				actionText: "新增场次",
				itemId: "",
				ruleForm: {
					date: "",
					time: "",
					grade: "",
					gender: "1",
					teacherName: "",
					mark: "",
					totalCount: "",
					testNameType: "",
					phone: ""
				},
				grades: [],
				teachers: [],
				testItem: [],
				rules: {
					teacherName: [
						{ required: true, message: "请选择教师", trigger: "change" }
					],
					totalCount: [
						{ required: true, message: "请输入最大预约人数", trigger: "blur" },
						{ validator: checkTotalCount }
					],
					date: [
						{
							type: "date",
							required: true,
							message: "请选择测试日期",
							trigger: "change"
						},
						{ validator: checkDate }
					],
					time: [{ validator: checkTime }],
					testNameType: [
						{ required: true, message: "请选择测试内容", trigger: "change" }
					]
				}
			};
		},
		mounted() {
			this.itemId = this.$util.getUrlParam("itemId");
			this.physicalTestId = this.$util.getUrlParam("physicalTestId");
			this.getGrades();
			this.getTeachers();
			if (this.itemId) {
				this.actionText = "编辑场次";
				this.getDetail();
			}
			this.changeGender();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//取消
			cancelProgect() {
				location.href = `/#/importFile?physicalTestId=${this.physicalTestId}&physicalName=${this.physicalName}`;
			},
			cancelTest() {
				location.href = "/#/history";
			},
			//获取年级
			getGrades() {
				let url = `${this.$util.domain}/physicaltest/gradelist`;

				this.$http({
					url,
					method: "POST"
				}).then(response => {
					if (response.data.error == 10000) {
						let gradeList = response.data.data;
						if (gradeList && gradeList.length > 0) {
							this.ruleForm.grade = `${gradeList[0]}级`;
							for (let i = 0; i < gradeList.length; i++) {
								this.grades.push({
									name: `${gradeList[i]}级`,
									value: gradeList[i]
								});
							}
						}
					}
				});
			},
			// 获取老师列表
			getTeachers() {
				let url = `${this.$util.domain}/campusadminapi/v1/tools/teachers`;
				this.teachers = [];
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let List = response.data.data;
						if (List && List.length > 0) {
							[...this.teachers] = List;
						}
						this.changeTeacher()
					}
				});
			},
			//获取详情
			getDetail() {
				let url = `${this.$util.domain}/physicaltest/testitemdetails`;

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						itemId: parseInt(this.itemId)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;

						this.ruleForm = {
							mark: dataObj.mark,
							grade: `${dataObj.grade}级`,
							gender: `${dataObj.gender}`,
							phone: dataObj.teacherPhone,
							teacherName: dataObj.mid + '',
							date: new Date(dataObj.startTime),
							totalCount: `${dataObj.totalCount}`,
							testNameType: dataObj.testNameType + '',
							time: [new Date(dataObj.startTime), new Date(dataObj.endTime)]
						};
						this.changeTeacher();
					}
				});
			},
			// 切换性别
			changeGender(val) {
				if (this.ruleForm.gender == 1) {
					// 男
					if (this.ruleForm.testNameType == "6") {
						this.ruleForm.testNameType = "7";
					}
					if (this.ruleForm.testNameType == "9") {
						this.ruleForm.testNameType = "8";
					}
					this.testItem = [
						{ name: "身高体重", id: "1" },
						{ name: "肺活量", id: "2" },
						{ name: "50米跑", id: "3" },
						{ name: "立定跳远", id: "4" },
						{ name: "坐位体前屈", id: "5" },
						{ name: "引体向上", id: "7" },
						{ name: "1000米跑", id: "8" }
					];
				} else if (this.ruleForm.gender == 0) {
					// 女
					if (this.ruleForm.testNameType == "7") {
						this.ruleForm.testNameType = "6";
					}
					if (this.ruleForm.testNameType == "8") {
						this.ruleForm.testNameType = "9";
					}
					this.testItem = [
						{ name: "身高体重", id: "1" },
						{ name: "肺活量", id: "2" },
						{ name: "50米跑", id: "3" },
						{ name: "立定跳远", id: "4" },
						{ name: "坐位体前屈", id: "5" },
						{ name: "仰卧起坐", id: "6" },
						{ name: "800米跑", id: "9" }
					];
				} else {
					if (this.ruleForm.testNameType > 5) {
						this.ruleForm.testNameType = '';
					}
					this.testItem = [
						{ name: "身高体重", id: "1" },
						{ name: "肺活量", id: "2" },
						{ name: "50米跑", id: "3" },
						{ name: "立定跳远", id: "4" },
						{ name: "坐位体前屈", id: "5" }
					];
				}
			},
			// 切换老师
			changeTeacher() {
				this.teachers.forEach((item) => {
					if (item.mid == this.ruleForm.teacherName) {
						this.ruleForm.phone = item.username;
					}
				})
			},
			//保存
			save() {
				let url = `${this.$util.domain}/v2/physicaltest/edittestitem`;

				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						let startTime = new Date(this.ruleForm.time[0]).format("hh:mm:ss");
						let endTime = new Date(this.ruleForm.time[1]).format("hh:mm:ss");
						let teacherName = '';
						startTime = new Date(this.ruleForm.date).format(
							`yyyy/MM/dd ${startTime}`
						);
						endTime = new Date(this.ruleForm.date).format(
							`yyyy/MM/dd ${endTime}`
						);
						startTime = new Date(startTime).getTime() * 1;
						endTime = new Date(endTime).getTime() * 1;
						this.teachers.forEach((item) => {
							if (this.ruleForm.teacherName == item.mid) {
								teacherName = item.teacherName
							}
						})

						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								endTime: endTime,
								startTime: startTime,
								teacherName: teacherName,
								mark: this.ruleForm.mark,
								phone: this.ruleForm.phone,
								mid: this.ruleForm.teacherName,
								id: parseInt(this.itemId) || null,
								totalCount: this.ruleForm.totalCount,
								grade: parseInt(this.ruleForm.grade),
								gender: parseInt(this.ruleForm.gender),
								testNameType: this.ruleForm.testNameType,
								physicalTestId: parseInt(this.physicalTestId)
							})
						}).then(response => {
							if (response.data.error == 10000) {
								this.$util.successMsg("保存成功");
								location.href = `/#/importFile?physicalTestId=${this.physicalTestId}&physicalName=${this.physicalName}`;
							} else {
								this.$util.errorMsg(response.data.message);
							}
						}, (response) => {
							this.$util.errorMsg(response.data.message);
						});
					}
				});
			}
		}
	};
</script>

<style>
	#newProject {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	#newProject .title {
		color: #0398ff;
	}

	#newProject .el-input1 {
		display: inline-block;
		width: 40%;
	}

	#newProject .time {
		display: inline-block;
		width: 100%;
	}

	#newProject .date {
		display: inline-block;
		width: 15%;
		min-width: 180px;
	}

	.el-time-panel__btn.cancel {
		position: relative;
	}

	.ruleForm {
		margin-left: 50px;
	}
</style>